/*
* @Author: Josh
* @Date:   2019-08-17 10:30:34
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-17 11:47:54
*/

/* 模态框 */
.ju-modal {
    display: none;
}
/* 显示模态框 */
.ju-modal.show {
    display: block;
}


/* 模态框窗口容器 */
.ju-modal .ju-modal-wrap {
    position     : absolute;
    width        : 75%;
    max-width    : 480px;
    top          : 45%;
    transform    : translateY(-50%);
    right        : 0;
    left         : 0;
    margin       : auto;
    background   : #fff;
    border-radius: .4rem;
    z-index      : 301;
}

/* 模态框内容区 */
.ju-modal .ju-modal-body {
    padding    : 1.8rem .8rem 1.5rem;
    text-align : center;
    font-size  : .8rem;
    line-height: 1.2rem;
    overflow   : hidden;
}
/* 模态框尾部 */
.ju-modal .ju-modal-footer {
    display   : flex;
    border-top: 1px solid #ddd;
}
/* 模态框尾部 按钮 */
.ju-modal .ju-modal-footer .ju-btn {
    border       : none;
    border-radius: 0;
    width        : 100%;
    font-size    : .8rem;
}
/* 按钮间的border */
.ju-modal .ju-modal-footer .ju-btn + .ju-btn {
    border-left: 1px solid #ddd;
}

/* 去除内容区内边距 */
.ju-modal .ju-modal-body.no-padding {
    padding: 0;
}
/* 图片形式的模态框样式 */
.ju-modal .ju-modal-body .ju-modal-img {
    display      : block;
    width        : 100%;
    border-radius: .3rem;
}
/* 图片模态框的关闭按钮 */
.ju-modal .ju-modal-close {
    position     : absolute;
    right        : 0;
    bottom       : -3rem;
    left         : 0;
    width        : 1.3rem;
    line-height  : 1.3rem;
    margin       : auto;
    text-align   : center;
    font-size    : .8rem;
    font-weight  : 100;
    color        : #eee;
    border       : 1px solid #eee;
    border-radius: 50%; 
}